<template>
  <div class="user-health">
    <div class="page-header">
      <h2 class="page-title">健康记录</h2>
    </div>
    
    <!-- 健康概览 -->
    <div class="health-overview">
      <h3>健康概览</h3>
      <div class="overview-grid">
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon blood-pressure">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="overview-content">
              <h4>最新血压</h4>
              <p class="value">{{ healthOverview.bloodPressure.value }} mmHg</p>
              <p class="time">{{ healthOverview.bloodPressure.time }}</p>
              <el-tag :type="getStatusType(healthOverview.bloodPressure.status)" size="small">
                {{ getStatusLabel(healthOverview.bloodPressure.status) }}
              </el-tag>
            </div>
          </div>
        </el-card>
        
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon temperature">
              <el-icon><Operation /></el-icon>
            </div>
            <div class="overview-content">
              <h4>最新体温</h4>
              <p class="value">{{ healthOverview.temperature.value }}°C</p>
              <p class="time">{{ healthOverview.temperature.time }}</p>
              <el-tag :type="getStatusType(healthOverview.temperature.status)" size="small">
                {{ getStatusLabel(healthOverview.temperature.status) }}
              </el-tag>
            </div>
          </div>
        </el-card>
        
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon heart-rate">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="overview-content">
              <h4>最新心率</h4>
              <p class="value">{{ healthOverview.heartRate.value }}次/分</p>
              <p class="time">{{ healthOverview.heartRate.time }}</p>
              <el-tag :type="getStatusType(healthOverview.heartRate.status)" size="small">
                {{ getStatusLabel(healthOverview.heartRate.status) }}
              </el-tag>
            </div>
          </div>
        </el-card>
        
        <el-card class="overview-card">
          <div class="overview-item">
            <div class="overview-icon blood-sugar">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="overview-content">
              <h4>最新血糖</h4>
              <p class="value">{{ healthOverview.bloodSugar.value }} mmol/L</p>
              <p class="time">{{ healthOverview.bloodSugar.time }}</p>
              <el-tag :type="getStatusType(healthOverview.bloodSugar.status)" size="small">
                {{ getStatusLabel(healthOverview.bloodSugar.status) }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    
    <!-- 健康记录列表 -->
    <div class="health-records">
      <div class="records-header">
        <h3>健康记录</h3>
        <el-form :model="searchForm" inline>
          <el-form-item label="记录类型">
            <el-select v-model="searchForm.type" placeholder="全部类型" clearable style="width: 200px">
              <el-option label="血压" value="blood_pressure" />
              <el-option label="体温" value="temperature" />
              <el-option label="心率" value="heart_rate" />
              <el-option label="血糖" value="blood_sugar" />
              <el-option label="体重" value="weight" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <el-card class="records-card">
        <el-timeline>
          <el-timeline-item
            v-for="record in healthRecords"
            :key="record.id"
            :timestamp="record.recordTime"
            :type="getTimelineType(record.status)"
          >
            <el-card class="record-item">
              <div class="record-content">
                <div class="record-header">
                  <el-tag :type="getTypeColor(record.type)">
                    {{ getTypeLabel(record.type) }}
                  </el-tag>
                  <el-tag :type="getStatusType(record.status)" size="small">
                    {{ getStatusLabel(record.status) }}
                  </el-tag>
                </div>
                <div class="record-details">
                  <p class="record-value">
                    <strong>{{ record.value }} {{ record.unit }}</strong>
                  </p>
                  <p v-if="record.notes" class="record-notes">
                    备注：{{ record.notes }}
                  </p>
                  <div v-if="record.suggestions" class="record-suggestions">
                    <p class="suggestions-title">健康建议：</p>
                    <p class="suggestions-content">{{ record.suggestions }}</p>
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        
        <div v-if="healthRecords.length === 0" class="no-data">
          <el-empty description="暂无健康记录" />
        </div>
      </el-card>
    </div>
    
    <!-- 健康趋势图表 -->
    <div class="health-chart">
      <h3>健康趋势</h3>
      <el-card>
        <div class="chart-tabs">
          <el-tabs v-model="activeChartTab" @tab-change="handleChartTabChange">
            <el-tab-pane label="血压趋势" name="blood_pressure">
              <div class="chart-container">
                <v-chart 
                  v-if="chartData.blood_pressure.length > 0"
                  class="chart" 
                  :option="bloodPressureOption" 
                  autoresize 
                />
                <el-empty v-else description="暂无血压数据" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="体温趋势" name="temperature">
              <div class="chart-container">
                <v-chart 
                  v-if="chartData.temperature.length > 0"
                  class="chart" 
                  :option="temperatureOption" 
                  autoresize 
                />
                <el-empty v-else description="暂无体温数据" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="心率趋势" name="heart_rate">
              <div class="chart-container">
                <v-chart 
                  v-if="chartData.heart_rate.length > 0"
                  class="chart" 
                  :option="heartRateOption" 
                  autoresize 
                />
                <el-empty v-else description="暂无心率数据" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="血糖趋势" name="blood_sugar">
              <div class="chart-container">
                <v-chart 
                  v-if="chartData.blood_sugar.length > 0"
                  class="chart" 
                  :option="bloodSugarOption" 
                  autoresize 
                />
                <el-empty v-else description="暂无血糖数据" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  Monitor, 
  Operation, 
  Timer, 
  DataAnalysis 
} from '@element-plus/icons-vue'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// API 基础URL
const API_BASE_URL = 'http://localhost:8080/api'

// 定义健康记录接口
interface HealthRecord {
  id: number
  type: string
  value: string
  unit: string
  status: string
  recordTime: string
  notes: string
  suggestions: string
}

// 获取当前用户ID
const getCurrentUserId = () => {
  try {
    const userInfoStr = localStorage.getItem('userInfo')
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr)
      return userInfo.id
    }
    return null
  } catch (error) {
    console.error('获取用户ID失败:', error)
    return null
  }
}

// 根据用户ID获取老人ID
const getElderlyIdByUserId = async (userId: number) => {
  try {
    const response = await fetch(`${API_BASE_URL}/elderly/user/${userId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (response.ok) {
      const result = await response.json()
      if (result.code === 200) {
        return result.data.id
      }
    }
    throw new Error('未找到对应的老人信息')
  } catch (error) {
    console.error('获取老人ID失败:', error)
    throw error
  }
}

const loading = ref(false)
const searchForm = reactive({
  type: '',
  dateRange: []
})

const healthRecords = ref<HealthRecord[]>([])
const healthOverview = ref({
  bloodPressure: { value: '--', time: '--', status: 'normal' },
  temperature: { value: '--', time: '--', status: 'normal' },
  heartRate: { value: '--', time: '--', status: 'normal' },
  bloodSugar: { value: '--', time: '--', status: 'normal' }
})

// 图表相关数据
const activeChartTab = ref('blood_pressure')
const chartData = ref({
  blood_pressure: [] as any[],
  temperature: [] as any[],
  heart_rate: [] as any[],
  blood_sugar: [] as any[]
})

// 获取类型标签
const getTypeLabel = (type: string) => {
  const typeMap: { [key: string]: string } = {
    blood_pressure: '血压',
    temperature: '体温',
    heart_rate: '心率',
    blood_sugar: '血糖',
    weight: '体重'
  }
  return typeMap[type] || type
}

// 获取类型颜色
const getTypeColor = (type: string) => {
  const colorMap: { [key: string]: string } = {
    blood_pressure: 'danger',
    temperature: 'warning',
    heart_rate: 'success',
    blood_sugar: 'info',
    weight: 'primary'
  }
  return colorMap[type] || 'default'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const statusMap: { [key: string]: string } = {
    normal: '正常',
    low: '偏低',
    high: '偏高',
    abnormal: '异常',
    NORMAL: '正常',
    LOW: '偏低',
    HIGH: '偏高',
    ABNORMAL: '异常'
  }
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: { [key: string]: string } = {
    normal: 'success',
    low: 'warning',
    high: 'danger',
    abnormal: 'danger',
    NORMAL: 'success',
    LOW: 'warning',
    HIGH: 'danger',
    ABNORMAL: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取时间轴类型
const getTimelineType = (status: string) => {
  const typeMap: { [key: string]: string } = {
    normal: 'success',
    low: 'warning',
    high: 'danger',
    abnormal: 'danger',
    NORMAL: 'success',
    LOW: 'warning',
    HIGH: 'danger',
    ABNORMAL: 'danger'
  }
  return typeMap[status] || 'primary'
}

// 格式化时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 加载健康记录
const loadHealthRecords = async () => {
  loading.value = true
  try {
    const userId = getCurrentUserId()
    if (!userId) {
      ElMessage.error('请先登录')
      return
    }
    
    // 获取老人ID
    const elderlyId = await getElderlyIdByUserId(userId)
    
    const params = new URLSearchParams()
    params.append('page', '0')
    params.append('size', '50')
    params.append('elderlyId', elderlyId.toString())
    
    // 添加搜索条件
    if (searchForm.type) {
      params.append('recordType', searchForm.type)
      console.log('添加记录类型筛选:', searchForm.type)
    }
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      // 格式化日期为 ISO 格式
      const startDate = new Date(searchForm.dateRange[0] as Date)
      const endDate = new Date(searchForm.dateRange[1] as Date)
      
      // 设置开始时间为当天00:00:00
      startDate.setHours(0, 0, 0, 0)
      // 设置结束时间为当天23:59:59
      endDate.setHours(23, 59, 59, 999)
      
      // 使用 ISO 格式发送到后端
      params.append('startTime', startDate.toISOString())
      params.append('endTime', endDate.toISOString())
      
      console.log('日期筛选参数:', {
        原始日期范围: searchForm.dateRange,
        startTime: startDate.toISOString(),
        endTime: endDate.toISOString()
      })
    }
    
    const requestUrl = `${API_BASE_URL}/health-records?${params.toString()}`
    console.log('请求URL:', requestUrl)
    
    const response = await fetch(requestUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    if (!response.ok) {
      throw new Error('获取健康记录失败')
    }
    
    const result = await response.json()
    console.log('API返回结果:', result)
    
    if (result.code === 200) {
      // 处理数据
      const records = result.data.content.map((record: any) => {
        let displayValue = ''
        if (record.recordType === 'blood_pressure') {
          // 构造血压显示值，确保使用正确的字段名
          const systolic = record.systolicPressure || record.value || 0
          const diastolic = record.diastolicPressure || 0
          displayValue = `${systolic}/${diastolic}`
          
          console.log('血压记录处理:', {
            原始记录: record,
            收缩压: systolic,
            舒张压: diastolic,
            显示值: displayValue
          })
        } else {
          displayValue = record.value?.toString() || '0'
        }
        
        return {
          id: record.id,
          type: record.recordType,
          value: displayValue,
          unit: record.unit || getDefaultUnit(record.recordType),
          status: record.status || 'normal',
          recordTime: formatDateTime(record.recordTime),
          notes: record.notes || '',
          suggestions: record.suggestions || ''
        }
      })
      
      console.log('处理后的记录:', records)
      healthRecords.value = records
      
      // 更新健康概览
      updateHealthOverview(records)
      
      // 处理图表数据
      processChartData(records)
    } else {
      ElMessage.error(result.message || '获取健康记录失败')
    }
  } catch (error) {
    console.error('加载健康记录失败:', error)
    ElMessage.error('加载健康记录失败')
  } finally {
    loading.value = false
  }
}

// 更新健康概览
const updateHealthOverview = (records: any[]) => {
  const latestRecords: { [key: string]: any } = {
    blood_pressure: null,
    temperature: null,
    heart_rate: null,
    blood_sugar: null
  }
  
  // 找到每种类型的最新记录
  records.forEach(record => {
    if (!latestRecords[record.type]) {
      latestRecords[record.type] = record
    }
  })
  
  // 更新概览数据
  healthOverview.value = {
    bloodPressure: {
      value: latestRecords.blood_pressure?.value || '--',
      time: latestRecords.blood_pressure?.recordTime || '--',
      status: latestRecords.blood_pressure?.status || 'normal'
    },
    temperature: {
      value: latestRecords.temperature?.value || '--',
      time: latestRecords.temperature?.recordTime || '--',
      status: latestRecords.temperature?.status || 'normal'
    },
    heartRate: {
      value: latestRecords.heart_rate?.value || '--',
      time: latestRecords.heart_rate?.recordTime || '--',
      status: latestRecords.heart_rate?.status || 'normal'
    },
    bloodSugar: {
      value: latestRecords.blood_sugar?.value || '--',
      time: latestRecords.blood_sugar?.recordTime || '--',
      status: latestRecords.blood_sugar?.status || 'normal'
    }
  }
}

// 获取默认单位
const getDefaultUnit = (recordType: string) => {
  const unitMap: { [key: string]: string } = {
    blood_pressure: 'mmHg',
    temperature: '°C',
    heart_rate: '次/分',
    blood_sugar: 'mmol/L',
    weight: 'kg'
  }
  return unitMap[recordType] || ''
}

// 搜索
const handleSearch = async () => {
  await loadHealthRecords()
}

// 重置
const handleReset = async () => {
  searchForm.type = ''
  searchForm.dateRange = []
  await loadHealthRecords()
}

// 图表标签页切换
const handleChartTabChange = (tabName: string) => {
  console.log('切换图表标签页:', tabName)
}

// 血压图表配置
const bloodPressureOption = computed(() => {
  const data = chartData.value.blood_pressure
  if (data.length === 0) return {}
  
  return {
    title: {
      text: '血压趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        if (!params || params.length === 0) return ''
        
        const time = params[0].name
        let result = `${time}<br/>`
        
        params.forEach((param: any) => {
          if (param.seriesName === '收缩压') {
            result += `收缩压: ${param.value} mmHg<br/>`
          } else if (param.seriesName === '舒张压') {
            result += `舒张压: ${param.value} mmHg<br/>`
          }
        })
        
        return result
      }
    },
    legend: {
      data: ['收缩压', '舒张压'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.time)
    },
    yAxis: {
      type: 'value',
      name: 'mmHg',
      min: 50,
      max: 200
    },
    series: [
      {
        name: '收缩压',
        type: 'line',
        data: data.map(item => item.systolic),
        smooth: true,
        lineStyle: { color: '#f56c6c' },
        itemStyle: { color: '#f56c6c' }
      },
      {
        name: '舒张压',
        type: 'line',
        data: data.map(item => item.diastolic),
        smooth: true,
        lineStyle: { color: '#409eff' },
        itemStyle: { color: '#409eff' }
      }
    ]
  }
})

// 体温图表配置
const temperatureOption = computed(() => {
  const data = chartData.value.temperature
  if (data.length === 0) return {}
  
  return {
    title: {
      text: '体温趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const point = params[0]
        return `${point.name}<br/>体温: ${point.value}°C`
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.time)
    },
    yAxis: {
      type: 'value',
      name: '°C',
      min: 35,
      max: 40
    },
    series: [
      {
        name: '体温',
        type: 'line',
        data: data.map(item => item.value),
        smooth: true,
        lineStyle: { color: '#e6a23c' },
        itemStyle: { color: '#e6a23c' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
              { offset: 1, color: 'rgba(230, 162, 60, 0.1)' }
            ]
          }
        }
      }
    ]
  }
})

// 心率图表配置
const heartRateOption = computed(() => {
  const data = chartData.value.heart_rate
  if (data.length === 0) return {}
  
  return {
    title: {
      text: '心率趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const point = params[0]
        return `${point.name}<br/>心率: ${point.value}次/分`
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.time)
    },
    yAxis: {
      type: 'value',
      name: '次/分',
      min: 40,
      max: 120
    },
    series: [
      {
        name: '心率',
        type: 'line',
        data: data.map(item => item.value),
        smooth: true,
        lineStyle: { color: '#67c23a' },
        itemStyle: { color: '#67c23a' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
            ]
          }
        }
      }
    ]
  }
})

// 血糖图表配置
const bloodSugarOption = computed(() => {
  const data = chartData.value.blood_sugar
  if (data.length === 0) return {}
  
  return {
    title: {
      text: '血糖趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const point = params[0]
        return `${point.name}<br/>血糖: ${point.value} mmol/L`
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.time)
    },
    yAxis: {
      type: 'value',
      name: 'mmol/L',
      min: 3,
      max: 15
    },
    series: [
      {
        name: '血糖',
        type: 'line',
        data: data.map(item => item.value),
        smooth: true,
        lineStyle: { color: '#909399' },
        itemStyle: { color: '#909399' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(144, 147, 153, 0.3)' },
              { offset: 1, color: 'rgba(144, 147, 153, 0.1)' }
            ]
          }
        }
      }
    ]
  }
})

// 处理图表数据
const processChartData = (records: any[]) => {
  const chartDataTemp = {
    blood_pressure: [] as any[],
    temperature: [] as any[],
    heart_rate: [] as any[],
    blood_sugar: [] as any[]
  }
  
  records.forEach(record => {
    const time = new Date(record.recordTime).toLocaleDateString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
    
    switch (record.type) {
      case 'blood_pressure':
        // 处理血压数据，确保正确解析收缩压和舒张压
        let systolic = 0, diastolic = 0
        if (record.value && record.value.includes('/')) {
          const parts = record.value.split('/')
          systolic = parseInt(parts[0]) || 0
          diastolic = parseInt(parts[1]) || 0
        }
        
        console.log('血压数据处理:', {
          原始值: record.value,
          收缩压: systolic,
          舒张压: diastolic
        })
        
        chartDataTemp.blood_pressure.push({
          time,
          systolic,
          diastolic
        })
        break
      case 'temperature':
        chartDataTemp.temperature.push({
          time,
          value: parseFloat(record.value) || 0
        })
        break
      case 'heart_rate':
        chartDataTemp.heart_rate.push({
          time,
          value: parseFloat(record.value) || 0
        })
        break
      case 'blood_sugar':
        chartDataTemp.blood_sugar.push({
          time,
          value: parseFloat(record.value) || 0
        })
        break
    }
  })
  
  // 按时间排序（最新的在右边）
  Object.keys(chartDataTemp).forEach(key => {
    chartDataTemp[key as keyof typeof chartDataTemp].sort((a, b) => 
      new Date(a.time).getTime() - new Date(b.time).getTime()
    )
  })
  
  console.log('处理后的图表数据:', chartDataTemp)
  chartData.value = chartDataTemp
}

onMounted(async () => {
  await loadHealthRecords()
})
</script>

<style scoped>
.user-health {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.health-overview {
  margin-bottom: 30px;
}

.health-overview h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.overview-card {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.overview-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.overview-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
  color: white;
}

.overview-icon.blood-pressure {
  background: linear-gradient(45deg, #f093fb, #f5576c);
}

.overview-icon.temperature {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

.overview-icon.heart-rate {
  background: linear-gradient(45deg, #43e97b, #38f9d7);
}

.overview-icon.blood-sugar {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.overview-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #666;
}

.overview-content .value {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.overview-content .time {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #999;
}

.health-records {
  margin-bottom: 30px;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.records-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.records-card {
  max-height: 600px;
  overflow-y: auto;
}

.record-item {
  margin: 0;
  box-shadow: none;
  border: 1px solid #ebeef5;
}

.record-content {
  padding: 8px 0;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.record-value {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.record-notes {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.record-suggestions {
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

.suggestions-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #409EFF;
}

.suggestions-content {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.no-data {
  padding: 40px 0;
}

.health-chart h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.chart-tabs {
  margin-bottom: 16px;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart {
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .records-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .overview-grid {
    grid-template-columns: 1fr;
  }
}
</style> 